<template>
  <div class="w-full">
    <a-row :gutter="12">
      <a-col :span="6">
        <a-card>
          <a-statistic
            :title="t['成功']"
            :value="suc"
            animation
            :value-style="{ color: '#0fbf60' }"
          >
          </a-statistic>
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card>
          <a-statistic :title="t['总数']" :value="sum" show-group-separator> </a-statistic>
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card>
          <a-statistic
            :title="t['失败']"
            :value="unknown"
            show-group-separator
            :value-style="{ color: 'red' }"
          >
          </a-statistic>
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card>
          <a-statistic
            :title="t['无权限']"
            :value="unAuths"
            show-group-separator
            :value-style="{ color: 'orange' }"
          >
          </a-statistic>
        </a-card>
      </a-col>
    </a-row>
    <a-card class="mt-2" :title="t['错误原因']">
      <a-table :data="tips" :columns="errorColumns"></a-table>
    </a-card>
  </div>
</template>

<script setup lang="ts">
import { TableColumnData } from "@arco-design/web-vue/es/table/interface";

const t = translate("公共模块");
withDefaults(
  defineProps<Partial<{ suc: number; unknown: number; sum: number; unAuths: number; tips: any }>>(),
  {
    suc: 0,
    unknown: 0,
    sum: 0,
    unAuths: 0,
    tips: []
  }
);

const errorColumns: TableColumnData[] = [
  { title: t.value?.["门店名称"], dataIndex: "name", align: "center" },
  { title: t.value?.["错误原因"], dataIndex: "msg", align: "center" },
  { title: t.value?.["行号"], dataIndex: "index", align: "center" }
];
</script>

<style lang="scss" scoped></style>
